<template>
    <div>
        <div class="content" @click="tiaojian_thr=false;tiaojian_fth=false">
            <!-- 左边的导航 -->
            <div class="qiehuan">
                <div @click="btn_switch=true" style="width:100px;height:50px">历史错题</div>
                <div @click="btn_switch=false" style="width:100px;height:50px">我的出题</div>
            </div>
            <!-- 右边区域 -->
            <!-- 错题 -->
            <div v-show="btn_switch && !wrongexam" class="cuoti">
                <div class="bread">
                        <div style="display: inline-block;width: 2px;height: 12px;background: #3F8CFD;"></div> 答题 &gt; 历史错题
                </div>
                <div class="wrongslist" v-for="(item,index) in wrongdata" :key="index" 
                :data-parzid="item.zid" @click="goWrongPaper($event)">
                    {{'题目：'+item.examination_paper_topic}}
                    <div class="wrongtime">
                        {{moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')}}
                    </div>
                </div>
                <div class="page" v-show="wrongdata.length>0">
                        <div :class="{firstpage:true,noclick:wrongpage==1}" @click="firstWrongPage">首页</div>
                        <div :class="{pageup:true,noclick:wrongpage==1}" @click="previousWrongPage">上一页</div>
                        <div class="pagenum">
                            <div v-for="(item,index) in wrongcount" :key="index"
                            :class="{pagecur:(wrongpage-1)==index}"
                            :data-pagenumber="index+1"
                            @click="pageWrongGet($event)">{{item}}</div>
                        </div>
                        <div :class="{pagedown:true,noclick:wrongpage==wrongcount}" @click="nextWrongPage">下一页</div>
                        <div :class="{lastpage:true,noclick:wrongpage==wrongcount}" @click="lastWrongPage">尾页</div>
                </div>
            </div>
            <div v-if="wrongexam">
                <div class="bread">
                    <div style="display: inline-block;width: 2px;height: 12px;background: #3F8CFD;"></div> 答题 &gt; 历史错题
                </div>
                <div class="exam_category">
                    <div style="width: 2px;height: 17px;background: #3F8CFD;"></div>
                    <div>{{wrongpaper.serial}}、{{wrongpaper.topic_type==1?'单选题':wrongpaper.topic_type==2?'多选题':'填空题'}}</div>
                </div>
                <div class="exam_title">
                    {{wrongpaper.topic}}
                </div>
                <!-- 单选 -->
                <div style="margin-left: 28px;margin-top: 40px;" v-if="wrongpaper.topic_type==1">
                    <div class="option_area" v-for="(item,index) in wrongpaper.answer_contents"
                    :key="index">
                        <div :class="{option_num_cur:right_ans[0].answer_tag==item.answer_tag,option_num:true}" 
                             :data-answerzid="item.zid" 
                             :style="{color:item.answer_tag==wrong_ans[0].answer_tag?'#FFFFFF':'#4A5566',
                             background:item.answer_tag==wrong_ans[0].answer_tag?'red':'#FFFFFF'}">
                            {{item.answer_tag}}
                        </div>
                        <div :class="{option_content:true,option_content_cur:right_ans[0].answer_tag==item.answer_tag}" 
                        :style="{color:item.answer_tag==wrong_ans[0].answer_tag?'red':'#4A5566'}"
                        :data-answerzid="item.zid">
                            {{item.answer_content}}
                        </div>
                    </div>
                </div>
                <!-- 多选 -->
                <div style="margin-left: 28px;margin-top: 40px;" v-if="wrongpaper.topic_type==2">
                    <div class="option_area" v-for="(item,index) in wrongpaper.answer_contents"
                    :key="index">
                        <div :class="{option_num_cur:rightans_status[index],option_num:true}" 
                             :data-answerzid="item.zid" 
                             :style="{color:userselect?'#FFFFFF':'#4A5566',
                             background:userselect?'red':'#FFFFFF'}">
                            {{item.answer_tag}}
                        </div>
                        <div :class="{option_content:true,option_content_cur:rightans_status[index]}" 
                        :style="{color:userselect?'red':'#4A5566'}"
                        :data-answerzid="item.zid">
                            {{item.answer_content}}
                        </div>
                    </div>
                </div>
                <!-- 解析 -->
                <div :class="{answer_parse:true,answer_parse_cur:parse_status}">
                    <div style="font-size: 16px;font-weight: 400;color: #4A5566;">
                        正确答案：<span v-for="(item,index) in right_ans" :key="index">{{wrongpaper.topic_type==1?item.answer_tag:item}}</span>
                    </div>
                    <div style="font-size: 16px;font-weight: 400;color: #3F8CFD;margin-top: 20px;cursor: pointer;user-select: none;" @click="parse_status=!parse_status">
                        查看解析<img :src="parse_status?'/img/shang.png':'/img/xia.png'">
                    </div>
                    <div v-show="parse_status" style="margin-top: 20px;width:840px;font-size: 16px;color: #4A5566;line-height: 35px;">
                        {{wrongpaper.answer_parse}}
                    </div>
                </div>
                <div class="retunebar">
                    <div @click="wrongexam=false" style="cursor: pointer;user-select: none;width: 68px;border: 1px solid #DBE0E4;">返回</div>
                    <div style="width:155px;" class="retunebar">
                        <div @click="goWrongPaper($event,1)" :data-parzid="undefined"
                        style="cursor: pointer;user-select: none;width: 68px;border: 1px solid #DBE0E4;">上一题</div>
                        <div @click="goWrongPaper($event,2)" :data-parzid="undefined"
                        style="cursor: pointer;user-select: none;width: 68px;border: 1px solid #DBE0E4;">下一题</div>
                    </div>
                </div>
            </div>

            <!-- 出题 -->
            <div v-show="!btn_switch" class="chuti">
                <div class="bread">
                        <div style="display: inline-block;width: 2px;height: 12px;background: #3F8CFD;"></div> 答题 &gt; 我的出题 {{toCreate?'> 我要出题':''}}
                </div>
                <!-- 有权限且有出题 jurisdiction为true且出题的数组长度大于0 -->
                <div v-show="true && !toCreate && jurisdiction && !singleExam">
                    <div class="chuti_btn" @click="toCreate=true">我要出题</div>
                    <div class="serach">
                        <div class="tiaojian" @click="tiaojian_one=!tiaojian_one">
                            出题领域 <img :src="tiaojian_one?'/img/shang.png':'/img/xia.png'">
                            <div v-show="tiaojian_one" class="tiaojian_zk">
                                <div>全部</div>
                                <div v-for="(item,index) in subjectlist" :key="index" :data-subname="item.name">{{item.name}}</div>
                            </div>
                        </div>
                        <div class="tiaojian" @click="tiaojian_two=!tiaojian_two">
                            上架情况 <img :src="tiaojian_two?'/img/shang.png':'/img/xia.png'">
                            <div v-show="tiaojian_two" class="tiaojian_zk">
                                <div v-for="(item,index) in create_status" :key="index">{{item}}</div>
                            </div>
                        </div>
                        <div class="serach_btn">搜索</div>
                    </div>
                    <div style="width: 100%;height: 1px;margin: 20px 0;background: #DDDFE7;"></div>
                    <div class="tittle">
                        <div style="width:63px;height:100%;margin-right:1px;">试卷ID</div>
                        <div style="width:108px;height:100%;margin-right:1px;">题目领域</div>
                        <div style="width:143px;height:100%;margin-right:1px;">试卷名称</div>
                        <div style="width:261px;height:100%;margin-right:1px;">上架情况</div>
                        <div style="width:170px;height:100%;margin-right:1px;">出题时间</div>
                        <div style="width:180px;height:100%;">操作</div>
                    </div>
                    <!-- 出题信息 -->
                    <div class="bgcolorcur" style="width:100%;height:474px;overflow: auto;">
                        <div class="infolist" v-for="(item,index) in paperlist" :key="index">
                            <div style="width:63px;height:100%;">{{index+1}}</div>
                            <div style="width:108px;height:100%;">{{item.subjets_str}}</div>
                            <div style="width:143px;height:100%;">{{item.name}}</div>
                            <div :style="{width:'261px',height:'100%',color:(item.putaway_state==3?'#FF9919':'#56B183')}">
                                {{item.putaway_state==3?item.putaway_state_str:'已'+item.putaway_state_str}}
                            </div>
                            <div style="width:170px;height:100%;color:#969593">
                                {{moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')}}
                            </div>
                            <div class="caozuozu" style="width:180px;height:100%;">
                                <span v-show="item.putaway_state==2" 
                                style="color:#3F9AD5;" 
                                :data-paperzid="item.zid"
                                @click="putAwayDown($event)">
                                    {{'[下架]'}} </span>
                                <span v-show="item.putaway_state==1" 
                                style="color:#3F9AD5;" 
                                :data-paperzid="item.zid"
                                @click="putAwayUp($event)">
                                    {{'[上架]'}} </span>
                                <span v-show="item.putaway_state!=3" 
                                style="color:#56B183;" 
                                :data-paperzid="item.zid"
                                @click="previewPaper($event)">{{'[预览]'}}</span>
                                <span v-show="item.putaway_state==3" 
                                @click="loadDraft($event)"
                                :data-paperzid="item.zid"
                                style="color:#3F9AD5;">{{'[编辑]'}}</span>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="page">
                        <div :class="{firstpage:true,noclick:page==1}" @click="firstPage">首页</div>
                        <div :class="{pageup:true,noclick:page==1}" @click="previousPage">上一页</div>
                        <div class="pagenum">
                            <div v-for="(item,index) in pagecount" :key="index"
                            :class="{pagecur:(page-1)==index}"
                            :data-pagenumber="index+1"
                            @click="pageGet($event)">{{item}}</div>
                        </div>
                        <div :class="{pagedown:true,noclick:page==pagecount}" @click="nextPage">下一页</div>
                        <div :class="{lastpage:true,noclick:page==pagecount}" @click="lastPage">尾页</div>
                    </div>
                </div>
                <!-- 有权限没出题 jurisdiction为true且出题的数组长度等于0-->
                <div v-show="false && !toCreate"></div>
                <!-- 没权限 -->
                <div v-if="!jurisdiction">
                    你没有出题权限，请联系管理员
                </div>
                <!-- 出题界面1 v-show="toCreate && !singleExam"  -->
                <div v-show="toCreate && !singleExam" class="create_one">
                    <!-- 遮罩 -->
                    <div class="mask" v-show="maskstatus">
                        <!-- 返回提示 -->
                        <div v-show="return_tips==1" class="tips">
                            <div class="tipsfont">确认返回？</div>
                            <div style="font-size: 16px;color: #7D8695;">
                                返回之后就会导致数据丢失，请谨慎操作。
                            </div>
                            <div class="tipsbtn" style="border: 1px solid #DDDFED;color: #4A5566;right:120px" @click="toCreate=false;maskstatus=false">
                                确认
                            </div>
                            <div class="tipsbtn" style="background: #3F8CFD;color: #FFFFFF;" @click="maskstatus=false">
                                取消
                            </div>
                        </div>
                        <!-- 必填项提示 -->
                        <div v-show="return_tips==2" class="tips">
                            <div class="tipsfont">提示</div>
                            <div style="font-size: 16px;color: #4A5566;text-align: center;margin-bottom: 10px;">
                                亲，请准确填写所有必填项
                            </div>
                            <div style="font-size: 14px;color: #969DA8;text-align: center">2秒后窗口将自动关闭</div>
                        </div>
                        <!-- 保存草稿1结果提示 -->
                        <div v-show="return_tips==3" class="tips">
                            <div class="tipsfont">提示</div>
                            <div style="font-size: 16px;color: #4A5566;text-align: center;margin-bottom: 10px;">
                                {{'保存成功'}}
                            </div>
                            <div style="font-size: 14px;color: #969DA8;text-align: center">2秒后窗口将自动关闭</div>
                        </div>
                    </div>

                    <!-- 试卷的基本信息 -->
                    <div class="examinfo">
                        <div style="margin-bottom: 20px;">
                            <span class="xinghao">*</span> <span class="miaoshu">试卷领域</span> &nbsp;
                            <div class="tiaojian" @click.stop="tiaojian_thr=!tiaojian_thr;tiaojian_fth=false">
                            {{lingyutext}}
                            <div v-show="tiaojian_thr" class="tiaojian_zk">
                                <div v-for="(item,index) in subjectlist" :key="index" 
                                :data-subname="item.name" :data-subzid="item.zid"
                                @click="selectSubject($event)">
                                    {{item.name}}
                                </div>
                            </div>
                        </div>
                        </div>

                        <div style="margin-bottom: 20px;">
                            <span class="xinghao">*</span> <span class="miaoshu">试卷分类</span> &nbsp;
                            <div class="tiaojian" @click.stop="tiaojian_fth=!tiaojian_fth;tiaojian_thr=false">
                            {{fenleitext}}
                            <div v-show="tiaojian_fth" class="tiaojian_zk">
                                <div v-for="(item,index) in grade_arr" :key="index" 
                                :data-subname="item.name" :data-gradezid="item.zid" @click="selectGrade($event)">
                                    {{item.name}}
                                </div>
                            </div>
                        </div>
                        </div>

                        <div style="margin-bottom: 20px;">
                            <span class="xinghao">*</span> <span class="miaoshu">试卷名称</span> &nbsp;
                            <input type="text" v-model="createdata.name" @focus="createdata.name=''">
                        </div>

                        <div style="margin-bottom: 20px;">
                            <span class="xinghao">*</span> <span class="miaoshu">试卷描述</span> &nbsp;
                            <input type="text" v-model="createdata.describe" @focus="createdata.describe=''">
                        </div>

                        <div style="margin-bottom: 20px;position: relative;">
                            <span class="xinghao">*</span> <span class="miaoshu">试卷封面</span> &nbsp;
                            <div style="display: inline-block;position: absolute;top:0;left:80px;">
                                <div class="pic" style="cursor: pointer;" @click="pickFile"></div>
                                <div class="pic_des">
                                    <div>请上传大于500X300像素的图片</div>
                                    <div style="margin: 10px 0;">文件小于2M</div>
                                    <div>支持JPG/PNG/BMP等格式图片</div>
                                </div>
                            </div>
                            <div style="display: inline-block;position: absolute;top:0;left:410px;">
                                <div class="pic" style="background: rgba(5,5,5,0.6);">
                                    <img :src="createdata.pic_url" v-show="!!createdata.pic_url">
                                </div>
                                <div class="pic_des">
                                    <div>请上传大于500X300像素的图片</div>
                                    <div style="margin: 10px 0;">文件小于2M</div>
                                    <div>支持JPG/PNG/BMP等格式图片</div>
                                </div>
                            </div>
                            <div class="threebtn">
                                <div @click="maskstatus=true;return_tips=1">返回</div>
                                <div @click="saveExamDraft">保存草稿</div>
                                <div style="background: #3F8CFD;color:#FFFFFF" @click="nextCreate">保存并继续</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 出题界面2 v-show="singleExam" -->
                <div v-show="singleExam" class="create_two">
                    <!-- 遮罩 -->
                    <div class="mask2" v-show="mask2status">
                        <div v-show="return_tips==4" class="tips" style="top:370px;left:455px;">
                            <div class="tipsfont">提示</div>
                            <div style="font-size: 16px;color: #4A5566;text-align: center;margin-bottom: 10px;">
                                {{'保存成功'}}
                            </div>
                            <div style="font-size: 14px;color: #969DA8;text-align: center">2秒后窗口将自动关闭</div>
                        </div>
                    </div>
                    <div class="mask2" v-show="mask2status">
                        <div v-show="return_tips==5" class="tips" style="top:370px;left:455px;">
                            <div class="tipsfont">提示</div>
                            <div style="font-size: 16px;color: #4A5566;text-align: center;margin-bottom: 10px;">
                                {{'提交成功'}}
                            </div>
                            <div style="font-size: 14px;color: #969DA8;text-align: center">2秒后窗口将自动关闭</div>
                        </div>
                    </div>
                    <!-- 左边题号 -->
                    <div class="tihao">
                        <div class="tihao_shang">
                            <div style="text-align: center;margin-top:73px">{{tihao_num+1}}/{{createdata.examination_paper_topic_list.length}}题</div>
                            <div v-for="(item,index) in createdata.examination_paper_topic_list" 
                            :key="index" :class="{tihaodiv:true,tihaodiv_cur:tihao_num==index}" 
                            @click="tihao_num=index">
                                {{index+1}}
                                <div @click.stop="deletTopic"></div>
                            </div>
                            <div class="addnum" @click="addData"></div>
                        </div>
                        <div style="width: 220px;height: 1px;background: #DCDFE6;margin:auto;"></div>
                        <div class="tihao_xia">
                            <div style="margin-top:24px;color: #FFFFFF;background: #3F8CFD;" @click="putAway">提交</div>
                            <div @click="singleExam=false;toCreate=true">返回上一层</div>
                        </div>
                    </div>
                    <!-- 右边内容 -->
                    <div >
                       <div class="examcont">
                        <div style="margin-bottom: 25px;">
                            <span class="xinghao">*</span> <span class="miaoshu">请输入题目</span> &nbsp;
                            <div style="margin-top: 15px;">
                                <input style="width:620px" type="text" 
                                v-model="createdata.examination_paper_topic_list[tihao_num].topic">
                            </div>
                        </div>
                        <div style="margin-bottom: 25px;">
                            <div style="margin-bottom: 15px;">
                                <span class="xinghao">*</span> <span class="miaoshu">请输入选择项</span> &nbsp;
                                <span style="font-size: 12px;color: #FF1A9A;text-decoration:underline;
                                text-decoration:underline;cursor: pointer;user-select: none;"
                                @click="addOption">
                                    点击添加选择项
                                </span>
                            </div>
                            <div style="margin-bottom: 15px;" v-for="(item,index) in createdata.examination_paper_topic_list[tihao_num].question_bank_list" :key="index">
                                <span class="optiontag">{{String.fromCharCode(65+index)}}: </span>
                                <input class="optiontext" style="width: 564px;height: 40px;" 
                                type="text" v-model="item.answer_content" 
                                @focus="item.answer_tag=String.fromCharCode(65+index);"> 
                                <span class="deletoption" @click="deletoption"></span>
                            </div>
                        </div>
                        <div style="margin-bottom: 25px;">
                            <span class="xinghao">*</span> <span class="miaoshu">请输入正确答案</span> &nbsp;
                            <div style="margin-top: 15px;">
                                <input style="width:620px" type="text" 
                                v-model="ans_arr[tihao_num]" 
                                @change="rightAnswer"
                                @focus="ans_arr[tihao_num]=''">
                            </div>
                        </div>
                        <div style="margin-bottom: 25px;">
                            <span class="xinghao">*</span> <span class="miaoshu">请输入解析</span> &nbsp;
                            <div style="margin-top: 15px;">
                                <input style="width:620px;height:110px;" type="text" 
                                v-model="createdata.examination_paper_topic_list[tihao_num].answer_parse">
                            </div>
                        </div>
                        <div class="btns">
                            <div style="color: #FFFFFF;background: #3F8CFD;" @click="savePaperDraft">保存草稿</div>
                            <div @click="shangyiti">上一题</div>
                            <div @click="xiayiti">下一题</div>
                        </div>
                    </div> 
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import moment from 'moment'
    export default {
        data() {
            return {
                // 历史错题和我的出题的切换
                btn_switch:true,
                // 筛选条件显示与隐藏
                tiaojian_one:false,
                tiaojian_two:false,
                tiaojian_thr:false,
                tiaojian_fth:false,
                //年级
                subjectlist:['全部','英语','数学','通史','政治','语文','生物'],
                //出题状态
                create_status:['全部','已上架','已下架','草稿'],
                // 是否可以出题
                jurisdiction:false,
                toCreate:false,
                singleExam:false,
                // 返回和必填项提示框
                return_tips:0,
                subjects_zid:null,
                lingyutext:'-选择领域-',
                fenleitext:'-选择分类-',
                // 出题列表
                paperlist:[],
                // 分类组
                grade_arr:[],
                picsrc:null,
                // 文件内容
                filedata:null,
                maskstatus:false,
                mask2status:false,
                // 试卷数据
                createdata:{
                    exarcise_subjets_zid:'',
                    exarcise_subjets_grade_zid:'',
                    name:'请简明扼要的写明试卷的主要内容，适合年级',
                    describe:'简要描述课程的主要内容，服务方向',
                    pic_url:null,
                    putaway_state:3,
                    examination_paper_topic_list:[]
                },
                // 题目数据
                topicdata:{
                    topic:'',
                    serial:null,
                    topic_type:1,
                    answer_parse:'',
                    question_bank_list:[]
                },
                // 选项数据
                optiondata:{
                            answer_content:'',
                            answer_tag:'',
                            right_answer:false
                },
                tihao_num:0,
                // 正确答案组
                ans_arr:[],
                page:1,
                limit:7,
                pagecount:null,
                pagenum:0,
                wrongpage:1,
                wronglimit:6,
                // 错题列表
                wrongdata:[],
                wrongcount:null,
                // 错题界面2
                wrongexam:false,
                // 错题数据
                wrongpaper:null,
                parse_status:false,
                // 错误答案组
                wrong_ans:[{answer_tag:''}],
                // 正确答案组
                right_ans:[{answer_tag:''}],
                // 单选正确答案状态组
                rightans_status:[false,false,false,false],
                // 用户答案选择状态
                userselect:[false,false,false,false],
                history_wrongs_zid:''
            }
        },
        created() {
            this.addData()
        },
        mounted() {
            this.jurisdiction = sessionStorage.getItem('jurisdiction')==1?true:false
            this.getSubjectList()
            this.getPaperList(this.page)
            this.getWrongsList()
        },
        methods: {
            // 获取出题列表
            getPaperList(page){
                axios.get(`http://121.89.232.163/api/topic/v1/get_topic_list/?page=${page}&limit=${this.limit}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    this.paperlist = res.data.data
                    if(res.data.count>7){
                        this.pagecount = Math.ceil(res.data.count/7)
                    }else{
                        this.pagecount = 1
                    }
                })
            },
             // 获取科目列表及年级
            getSubjectList(){
                axios.get('http://121.89.232.163/api/exarcisek/v1/get_subjets_list/')
                .then(res=>{
                    //console.log(res.data.data)
                    this.subjectlist = res.data.data
                })
            },
            // 获取错题列表
            getWrongsList(){
                axios.get(`http://121.89.232.163/api/personal-center/v1/get_history_wrongs_list/?page=${this.wrongpage}&limit=${this.wronglimit}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    if(res.data.code==1){
                        this.wrongdata = res.data.data
                        if(res.data.count>6){
                            this.wrongcount = Math.ceil(res.data.count/6)
                        }else{
                            this.wrongcount = 1
                        }
                    }
                })
            },
            // 深拷贝
            deepClone(obj) {
                let _obj = JSON.stringify(obj)
                return JSON.parse(_obj)
            },
            // 模板初始化
            addData(){
                this.createdata.examination_paper_topic_list.push(this.deepClone(this.topicdata))
                let n = this.createdata.examination_paper_topic_list.length-1
                this.createdata.examination_paper_topic_list[n].serial=this.createdata.examination_paper_topic_list.length
                for(let i=0;i<4;i++){
                    this.createdata.examination_paper_topic_list[n]
                    .question_bank_list.push(this.deepClone(this.optiondata))
                }
                this.ans_arr.push('请输入正确答案')
            },
            selectSubject(e){
                this.lingyutext = e.target.dataset.subname
                this.subjects_zid=e.target.dataset.subzid-1
                this.grade_arr = this.subjectlist[this.subjects_zid].subjets_grades
                this.createdata.exarcise_subjets_zid = e.target.dataset.subzid
                // console.log(e.target.dataset.subzid)
            },
            selectGrade(e){
                this.fenleitext = e.target.dataset.subname
                this.createdata.exarcise_subjets_grade_zid = e.target.dataset.gradezid
                // console.log(e.target.dataset.gradezid)
            },
            // 选择文件
            async pickFile(){
                let picdata = await window.showOpenFilePicker()
                // 遍历选择的文件
            for (let fileHandle of picdata) {
                // 获取文件内容
                let fileData = await fileHandle.getFile();
                this.filedata = fileData
                console.log(this.filedata)
                // 读文件数据
                let buffer = await fileData.arrayBuffer();
                // 转成Blod url地址
                let src = URL.createObjectURL(new Blob([buffer]));
                this.picsrc = src
                this.onloadFile()
                }
            },

            //文件上传
            onloadFile(){
                // 上传图像通常要将文件参数放在fromdata 对象中
                // 创建formData实例
                // 向formData实例中追加属性 (参数1：属性名 参数2：属性值)
                let formData=new FormData()
                formData.append('img',this.filedata)
                axios.post('http://121.89.232.163/api/topic/v1/upload/',formData,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    // console.log(res.data)
                    if(res.data.code==1){
                        let src = 'http://121.89.232.163/static'+res.data.img_path
                        this.createdata.pic_url = src
                        alert('上传成功')
                    }else{
                        alert('上传失败请重新上传')
                    }
                })
            },
            // 出题界面1----- 查看所有必填项是否已填
            checkMustExam(){
                if(this.createdata.exarcise_subjets_zid==''){
                    this.maskstatus=true
                    let timer = setTimeout(() => {
                        this.maskstatus=false
                        clearTimeout(timer)
                    }, 2000)
                    this.return_tips = 2
                    return -1
                }
                if(this.createdata.exarcise_subjets_grade_zid==''){
                    this.return_tips = 2
                    this.maskstatus=true
                    let timer = setTimeout(() => {
                        this.maskstatus=false
                        clearTimeout(timer)
                    }, 2000)
                    return -1
                }
                if(this.createdata.name=='请简明扼要的写明试卷的主要内容，适合年级' || this.createdata.name==''){
                    this.return_tips = 2
                    this.maskstatus=true
                    let timer = setTimeout(() => {
                        this.maskstatus=false
                        clearTimeout(timer)
                    }, 2000)
                    return -1
                }
                if(this.createdata.describe=='简要描述课程的主要内容，服务方向' || this.createdata.describe==''){
                    this.return_tips = 2
                    this.maskstatus=true
                    let timer = setTimeout(() => {
                        this.maskstatus=false
                        clearTimeout(timer)
                    }, 2000)
                    return -1
                }
                if(this.createdata.pic_url==undefined){
                    this.return_tips = 2
                    this.maskstatus=true
                    let timer = setTimeout(() => {
                        this.maskstatus=false
                        clearTimeout(timer)
                    }, 2000)
                    return -1
                }
            },
            // 保存草稿1  maskstatus 
            saveExamDraft(){
                if(this.checkMustExam()==-1){
                    return
                }else{
                    let data = this.createdata
                    let url = 'http://121.89.232.163/api/topic/v1/save_topic/'
                    axios.post(url,{data},{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        // console.log(res.data.code)
                        if(res.data.code==1){
                            this.maskstatus = true
                            this.return_tips = 3
                            let timer = setTimeout(() => {
                                this.maskstatus=false
                                clearTimeout(timer)
                            }, 2000)
                        }
                    })
                }
            },
            // 保存草稿2
            savePaperDraft(){
                let data = this.createdata
                    let url = 'http://121.89.232.163/api/topic/v1/save_topic/'
                    axios.post(url,{data},{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        if(res.data.code==1){
                            this.mask2status = true
                            this.return_tips = 4
                            let timer = setTimeout(() => {
                                this.mask2status=false
                                clearTimeout(timer)
                            }, 2000)
                        }
                    })
            },
            // 上架
            putAway(){
                this.createdata.putaway_state = 1
                let data = this.createdata
                let url = 'http://121.89.232.163/api/topic/v1/save_topic/'
                axios.post(url,{data},{headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    // console.log(res.data.code)
                    if(res.data.code==1){
                        this.mask2status = true
                        this.return_tips = 5
                        let timer = setTimeout(() => {
                            this.mask2status=false
                            clearTimeout(timer)
                        }, 2000)
                    }
                })
            },
            // 保存并继续
            nextCreate(){
                if(this.checkMustExam()==-1){
                    return
                }else{
                    this.singleExam = true
                }
            },
            // 删除一题
            deletTopic(){
                let length = this.createdata.examination_paper_topic_list.length
                if(length>1){
                    this.createdata.examination_paper_topic_list.pop()
                }else{
                    return
                }
            },
            // 添加一个选择项
            addOption(){
                this.createdata.examination_paper_topic_list[this.tihao_num]
                .question_bank_list.push({
                            answer_content:'',
                            answer_tag:'',
                            right_answer:false
                        })
            },
            // 删除一个选择项
            deletoption(){
                let n = this.createdata.examination_paper_topic_list[this.tihao_num]
                .question_bank_list.length
                if(n>1){
                    this.createdata.examination_paper_topic_list[this.tihao_num]
                    .question_bank_list.pop()
                }else{
                    return
                }
            },
            // 上架下架状态
            putAwayDown(e){
                let data = {
                    examination_paper_zid:e.target.dataset.paperzid,
                    putaway_state:1
                }
                axios.post('http://121.89.232.163/api/topic/v1/chang_putaway/',data,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    if(res.data.code==1){
                        this.getPaperList(this.page)
                    }else{
                        alert('操作失败')
                    }
                })
            },
            putAwayUp(e){
                let data = {
                    examination_paper_zid:e.target.dataset.paperzid,
                    putaway_state:2
                }
                axios.post('http://121.89.232.163/api/topic/v1/chang_putaway/',data,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    if(res.data.code==1){
                        this.getPaperList(this.page)
                    }else{
                        alert('操作失败')
                    }
                })
            },
            // 分页
            firstPage(){
                if(this.page==1){
                    return
                }else{
                    this.getPaperList(1)
                }
            },
            previousPage(){
                if(this.page==1){
                    return
                }else{
                    this.page--
                    this.getPaperList(this.page)
                }
            },
            pageGet(e){
                this.page = e.target.dataset.pagenumber
                this.getPaperList(this.page)
            },
            nextPage(){
                if(this.page==this.pagecount){
                    return
                }else{
                    this.page++
                    this.getPaperList(this.page)
                }
            },
            lastPage(){
                if(this.page==this.pagecount){
                    return
                }else{
                    this.getPaperList(this.pagecount)
                }
            },
            // 错题列表分页
            firstWrongPage(){
                if(this.wrongpage==1){
                    return
                }else{
                    this.wrongpage = 1
                    this.getWrongsList()
                }
            },
            previousWrongPage(){
                if(this.wrongpage==1){
                    return
                }else{
                    this.wrongpage--
                    this.getWrongsList()
                }
            },
            pageWrongGet(e){
                this.wrongpage = e.target.dataset.pagenumber
                this.getWrongsList()
            },
            nextWrongPage(){
                if(this.wrongpage==this.wrongcount){
                    return
                }else{
                    this.wrongpage++
                    this.getWrongsList()
                }
            },
            lastWrongPage(){
                if(this.wrongpage==this.wrongcount){
                    return
                }else{
                    this.wrongpage=this.wrongcount
                    this.getWrongsList()
                }
            },
            // 预览试卷
            previewPaper(e){
                let zid = e.target.dataset.paperzid
                axios.get(`http://121.89.232.163/api/topic/v1/preview_examination_paper_topic_list/?examination_paper_zid=${zid}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    // console.log(res)
                    if(res.data.code==1){
                        this.$router.push({path:'/daily',query:{dailydata:res.data.data,is_preview:true}})
                    }
                })
            },
            // 出题列表编辑，加载草稿
            loadDraft(e){
                let zid = e.target.dataset.paperzid
                axios.get('http://121.89.232.163/api/topic/v1/save_topic/?examination_paper_zid='+zid,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    // console.log(res.data.code)
                    if(res.data.code==1){
                        this.singleExam = true
                        this.createdata = res.data.data
                    }
                })
            },
            // 筛选正确答案
            rightAnswer(){
                this.createdata.examination_paper_topic_list[this.tihao_num]
                .question_bank_list.forEach(item => {
                    if(item.answer_tag==this.ans_arr[this.tihao_num]){
                        item.right_answer = true
                    }
                })
                // console.log(this.createdata.examination_paper_topic_list[this.tihao_num].question_bank_list)
            },
            // 上一题下一题
            xiayiti(){
                if(this.tihao_num<this.createdata.examination_paper_topic_list.length-1){
                    this.tihao_num++
                }else{
                    return
                }
            },
            shangyiti(){
                if(this.tihao_num>0){
                    this.tihao_num--
                }else{
                    return
                }
            },
            // 跳转错题界面2
            goWrongPaper(e,but_type=''){
                let zid = e.target.dataset.parzid
                if(zid != undefined){
                    this.history_wrongs_zid = zid
                }
                axios.get(`http://121.89.232.163/api/personal-center/v1/get_history_wrongs/?history_wrongs_zid=${this.history_wrongs_zid}&but_type=${but_type}`,
                {headers:{Authorization:sessionStorage.getItem('token')}})
                .then(res=>{
                    // console.log(res)
                    if(res.data.code==1){
                        this.wrongpaper = res.data.data
                        this.history_wrongs_zid = this.wrongpaper.history_wrongs_zid
                        this.wrong_ans = this.wrongpaper.wrongs_question_banks_list
                        let data = {
                            examination_paper_topic_zid:this.wrongpaper.zid,
                            user_submit_answers:[],
                            practice_type:this.wrongpaper.topic_type
                        }
                        this.wrongpaper.wrongs_question_banks_list.forEach(item=>{
                            data.user_submit_answers.push({answers_zid:item.zid})
                        })
                            // console.log(data.user_submit_answers.length)
                        if(data.user_submit_answers.length>1){
                            this.verifyDuoAnswer(data)
                        }else{
                            this.verifyAnswer(data)
                        }
                    }else{
                        alert('没有下一题')
                    }
                })
            },
            //验证题目答案
                verifyAnswer(data){
                    let url = 'http://121.89.232.163/api/exarcisek/v1/verify_the_answer/'
                    axios.post(url,data,{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        this.wrongexam = true
                        this.right_ans = res.data.data.rep_answers_status
                    })
                },
            // 验证多选答案
                verifyDuoAnswer(data){
                    let url = 'http://121.89.232.163/api/exarcisek/v1/verify_the_answer/'
                    axios.post(url,data,{headers:{Authorization:sessionStorage.getItem('token')}})
                    .then(res=>{
                        this.wrongexam = true
                        this.right_ans = res.data.data.rep_answers_status
                        let right = []
                        this.right_ans.forEach(item => {
                            if(item.right_answer){
                                right.push(item.answer_tag)
                            }
                        })
                        let right_data = [...new Set(right)]
                        this.right_ans = right_data
                        right_data.forEach(item=>{
                            this.wrongpaper.answer_contents.forEach((ele,index)=>{
                                if(ele.answer_tag == item){
                                    this.$set(this.rightans_status,index,true)
                                }
                            })
                        })
                        // console.log(this.rightans_status)
                        this.wrongpaper.answer_contents.forEach(item=>{
                            data.user_submit_answers.forEach((ele,index)=>{
                                if(item.answer_tag==ele.answer_tag){
                                    this.$set(this.userselect,index,true)
                                }
                            })
                        })

                    })
                },
        },
    }
</script>

<style scoped>
.content{
    width: 1200px;
    margin: 0 auto;
    display: flex;
}
.qiehuan{
    width: 216px;
    height: 568px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #DFDFDF;
    border: 1px solid #ECECEC;
    margin-top: 24px;
    margin-right: 50px;
}
.chuti{
    width: 930px;
}
.bread{
    margin-top: 35px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    margin-bottom: 23px;
}
.chuti_btn{
    width: 137px;
    height: 40px;
    background: #3F8CFD;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}
.tiaojian{
    width: 97px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #DDDFE7;
    display: inline-block;
    margin-right: 20px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7D8695;
    line-height: 32px;
    text-align: center;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.serach_btn{
    width: 66px;
    height: 32px;
    background: #3F8CFD;
    font-size: 12px;
    font-weight: 400;
    color: #FEFEFE;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}
.tiaojian_zk{
    position: absolute;
    width: 100%;
    top: 32px;
    left: -1px;
    border: 1px solid #DDDFE7;
    z-index: 20;
}
.tiaojian_zk>div{
    width: 100%;
    height: 32px;
    background: #FFFFFF;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7D8695;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: 0.5s;
    z-index: 22;
}
.tiaojian_zk>div:hover{
    background: #F1F2F5;
}
.tittle{
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
}
.tittle>div{
    text-align: center;
    display: inline-block;
    background: #4A5566;
}
.create_one{
    position: relative;
    width: 100%;
    height: 530px;
    border: 1px solid #DCDFE6;
    padding-left: 88px;
    padding-top: 40px;
}
.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 20;
    background: rgba(40,40,40,0.7);
}
.tips{
    width: 562px;
    height: 166px;
    position: absolute;
    top: 245px;
    left: 488px;
    transform: translate(-281px,-83px);
    background: #FFFFFF;
    padding: 20px;
}
.tipsfont{
    font-size: 20px;
    font-weight: 500;
    color: #4A5566;
    margin-bottom: 11px;
}
.tipsbtn{
    position: absolute;
    width: 82px;
    height: 40px;
    bottom: 20px;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    bottom: 20px;
    right: 20px;
    line-height: 40px;
    text-align: center;
}
.xinghao{
    color: #FF1A9A;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 32px;
}
.miaoshu{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 32px;
}
input{
    width: 324px;
    height: 40px;
    border: 1px solid #DCDFE6;
    transition: 0.5s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
}
input:focus{
    border-color: #66afe9;
    outline: none;
    width: 448px;
}
.pic{
    position: absolute;
    width: 100px;
    height: 100px;
    display: inline-block;
    background: #EEEEEE url('/public/img/moren.png');
}
.pic_des{
    display: inline-block;
    width: 200px;
    font-size: 14px;
    color: #969DA8;
    position: absolute;
    top: 0;
    left: 110px;
    user-select: none;
}
.threebtn{
    width: 530px;
    height: 40px;
    margin-top: 130px;
    margin-left: 146px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.threebtn>div{
    width: 137px;
    height: 40px;
    border: 1px solid #DBE0E4;
}
.create_two{
    position: relative;
    width: 100%;
    height: 808px;
    border: 1px solid #DCDFE6;
    display: flex;
}
.tihao{
    width: 240px;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #DEDEDE;
}
.examcont{
    box-sizing: border-box;
    position: relative;
    height: 100%;
    padding-top: 30px;
    padding-left: 28px;
    overflow: auto;
}
.tihao_shang{
    width: 100%;
    height: 684px;
    overflow: auto;
}
.tihao_shang>div{
    margin-bottom: 20px;
}
.tihaodiv{
    position: relative;
    width: 75px;
    height: 75px;
    background: #EEF4FE;
    border: 1px solid #3F8CFD;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #3F8CFD;
    line-height: 75px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
.tihaodiv_cur{
    background: #3F8CFD;
    color: #FFFFFF;
}
.tihaodiv>div{
    position: absolute;
    width: 16px;
    height: 16px;
    background: url('/public/img/jian.png');
    cursor: pointer;
    top: 30px;
    left: 85px;
}
.addnum{
    width:57px;
    height:57px;
    margin:auto;
    background: url('/public/img/jia.png');
    cursor: pointer;
}
.tihao_xia>div{
    width: 86px;
    height: 32px;
    border: 1px solid #DDDFE7;
    margin: 6px auto;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.examcont input:focus{
    border-color: #66afe9;
    outline: none;
}
.optiontext{
    width: 564px;
    height: 40px;
}
.optiontag{
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 40px;
    display: inline-block;
    width: 20px;
    user-select: none;
}
.deletoption{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url('/public/img/jian.png');
    cursor: pointer;
    margin-left: 5px;
}
.btns{
    display: flex;
    justify-content: space-around;
    width: 240px;
    margin-left: 400px;
    margin-bottom: 20px;
}
.btns>div{
    width: 68px;
    height: 30px;
    border: 1px solid #DBE0E4;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.infolist{
    width: 100%;
    height: 53px;
    display: flex;
}
.infolist>div{
    text-align: center;
    line-height: 53px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
}
.caozuozu>span{
    cursor: pointer;
    user-select: none;
}
.bgcolorcur>div:nth-child(2n){
    background: #F1F2F5;
}
.page{
    margin-top: 30px;
    width: 100%;
    height: 37px;
    display: flex;
    justify-content: space-between;
}
.firstpage{
    width: 32px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 9px;
    user-select: none;
    cursor: pointer;
}
.noclick{
    color: #C9CDD0 !important;
    cursor: default !important;
}
.pageup{
    width: 48px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 14px;
    user-select: none;
    cursor: pointer;
}
.pagedown{
    width: 48px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    margin-right: 9px;
    user-select: none;
    cursor: pointer;
}
.lastpage{
    width: 32px;
    height: 19px;
    font-size: 16px;
    font-family: Helvetica;
    color: #4D565C;
    line-height: 19px;
    user-select: none;
    cursor: pointer;
}
.pagenum{
    display: flex !important;
    margin-right: 14px;
    justify-content: space-around;
}
.pagenum>div{
    width: 37px;
    height: 37px;
    text-align: center;
    line-height: 37px;
    user-select: none;
    cursor: pointer;
}
.pagecur{
    background: #4D565D;
    border-radius: 50%;
    color: #FFFFFF;
}
.mask2{
    width: 932px;
    height: 808px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
    background: rgba(40,40,40,0.7);
}
.wrongslist{
    position: relative;
    width: 868px;
    height: 106px;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    margin: auto;
    margin-bottom: 35px;
    padding-left: 30px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 106px;
    cursor: pointer;
    user-select: none;
}
.wrongtime{
    position: absolute;
    height: 64px;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
}
.exam_category{
    width: 899px;
    margin-left: 28px;
    margin-top: 22px;
}
.exam_category>div{
    display: inline-block;
}
.exam_category>div:nth-child(2){
    height: 28px;
    width: 105px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #27364E;
    line-height: 28px;
    margin-left: 12px;
    margin-right: 590px;
}
.exam_title{
    width: 899px;
    height: 219px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 35px;
    margin-top: 10px;
    margin-left: 28px;
    word-wrap: break-word;
}
.option_area{
    position: relative;
    margin-bottom: 23px;
}
.option_area>div{
    display: inline-block;
}
.option_num{
    position: absolute;
    top: 0;
    left: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #979797;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #979797;
    line-height: 26px;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.option_content{
    margin-left: 50px;
    width: 443px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4A5566;
    line-height: 28px;
    word-wrap: break-word;
    cursor: pointer;
    user-select: none;
}
.option_num_cur{
    color: #FFFFFF !important;
    background: #3F8CFD !important;
}
.option_content_cur{
    color: #3F8CFD !important;
}
.answer_parse{
    width: 860px;
    height: 100px;
    background: #F5F5F5;
    margin-left: 75px;
    padding-top: 14px;
    padding-left: 23px;
    transition: 0.5s;
    overflow: auto;
    margin-bottom: 20px;
}
.answer_parse_cur{
    height: 200px;
}
.retunebar{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #4B555E;
    line-height: 30px;
    text-align: center;
}
.retunebar>div{
    height: 30px;
}
</style>